<template>
  <el-dialog
    :title="$t('common.view')"
    :width="width"
    :visible.sync="isVisible"
    class="user-view"
  >
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-user" /> <span>{{ '流程名称' +'：' }}</span> {{ actReModel.name }}
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-suitcase" /> <span>{{ '流程关键字' +'：' }}</span> {{ actReModel.key }}
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-user" /> <span>{{ '版本号' +'：' }}</span> {{ actReModel.version }}
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-suitcase" /> <span>{{ '流程类型' +'：' }}</span> {{ actReModel.category }}
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <div class="view-item">
          <i class="el-icon-document" /> <span>{{ '流程描述' +'：' }}</span> {{ actReModel.description ? actReModel.description: $t('tips.nothing') }}
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name: 'ModelView',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      screenWidth: 0,
      width: this.initWidth(),
      actReModel: {}
    };
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.close();
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth();
      })();
    };
  },
  methods: {
    initWidth() {
      this.screenWidth = document.body.clientWidth;
      if (this.screenWidth < 550) {
        return '95%';
      } else if (this.screenWidth < 990) {
        return '580px';
      } else if (this.screenWidth < 1400) {
        return '600px';
      } else {
        return '650px';
      }
    },
    setUser(val) {
      this.actReModel = { ...val };
      this.actReModel.description = val['metaInfo'].match(
        /description":"(\S*)","revision/
      )[1];
    },
    close() {
      this.$emit('close');
    }
  }
};
</script>
<style lang="scss" scoped>
.user-view {
  .img-wrapper {
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 10px;
    img {
      width: 4rem;
      border-radius: 50%;
    }
  }
  .view-item {
    margin: 7px;
    i {
      font-size: 0.97rem;
    }
    span {
      margin-left: 5px;
    }
  }
}
</style>
